import gemoji from '@bytemd/plugin-gemoji'
import gfm from '@bytemd/plugin-gfm'
import highlight from '@bytemd/plugin-highlight'
import mediumZoom from '@bytemd/plugin-medium-zoom'
import { Viewer } from '@bytemd/react'
import { DoubleLeftOutlined } from '@ant-design/icons';
import Title from 'antd/lib/typography/Title'
import Text from 'antd/lib/typography/Paragraph';
import 'bytemd/dist/index.min.css' //引入样式
import { useEffect, useState } from 'react'
import { Link, useParams } from 'react-router-dom'
import moment from 'moment';
import { getArticle } from '../../services/api'
import style from './style.module.less'
import { Carousel, Space, Tag } from 'antd'
import { getTagColor } from '../../func'
import 'github-markdown-css/github-markdown.css' //md样式

const plugins = [
    gfm(),
    mediumZoom(),
    gemoji(),
    highlight() //代码高亮
]
interface Params {
    id: string
}
export default function View() {
    const { id } = useParams<Params>()
    // eslint-disable-next-line @typescript-eslint/no-array-constructor
    const [info, setInfo] = useState({ author: { nickname: '', account: '' }, title: '', content: '', tags: '',subTitle:'', banner: new Array(), preview: 0, ctime: 0, mtime: 0 })
    //初始化
    useEffect(() => {
        getArticle(id).then((res) => {
            if (res.data) {
                if (res.data.info.author.nickname)
                    setInfo(res.data.info)
            }
        })
    }, [id])
    return (
        <div className={style.warp}>
            <div className={style.carousel}>
                <Carousel autoplay >
                    {info.banner.map((item, index) => {
                        return (<img key={index} src={item} alt="" className={style.banner} />)
                    })}
                </Carousel>
            </div>
            <div className={style.header}>
                <div>
                    <Title style={{margin:0}}>{info.title}</Title>
                    <Text style={{paddingLeft:80,color:'#aaa',width: 250,fontSize:16}} ellipsis={true}>{info.subTitle?'—'+info.subTitle:''}</Text>
                </div>
                <div className={style.tag}>
                    <div>
                        标签：
                        {info.tags.split(',').map((tag) => {
                            return (<Tag color={getTagColor(tag)} key={tag}>{tag}</Tag>)
                        })}
                    </div>
                    <Space>
                        <div>发布人：<b>{info.author.nickname ? info.author.nickname : info.author.account}</b></div>
                        <div>浏览量：<b>{info.preview}</b></div>
                        <div>创建时间：<b>{moment(info.ctime).format("YYYY-MM-DD HH:mm:ss")}</b></div>
                        <div>最近一次更新：<b>{moment(info.mtime).format("YYYY-MM-DD HH:mm:ss")}</b></div>
                    </Space>
                </div>
            </div>
            <div className={style.mdcover}>
                <Viewer
                    value={info.content}
                    plugins={plugins}  //插件
                />
            </div>
            <div className={style.footer}>
                <Link to="/Person"><DoubleLeftOutlined />返回</Link>
            </div>
        </div>
    )
}